    var pages = null;
    var count = 0;
    var gesturableImg = null;
    
    jQuery('div').on('pagehide', function(event, ui){
        var page = jQuery(event.target);
          console.log("pagehide");
          page.remove();
      });
    
    $(document).ready(function(){
        $.mobile.page.prototype.options.domCache = false;
        $("#mycanvas").parents("*").css("overflow", "visible");
        setStyle("chapter");
        document.getElementById("p_head").innerHTML="Стр "+(parseInt(count)+1);
        $("#a_head_l").hide();
        
        console.log("chapter");
        
        var http = "http://anibox.me/api.php?task=get_chapter&id="+getParam("id");
        $.getJSON(http, function(data) {
            pages = data.files;
            createList();
            $("#mypanel").trigger("updatelayout");
            gotozoom();
        });
        
     });
    
    //set image in canvas
    function gotozoom(){
        gesturableImg = new ImgTouchCanvas({
            canvas: document.getElementById('mycanvas'),
            path: pages[parseInt(count)],
            desktop: true
        });
        
    }
    
    //click in head next image
    function nextImg(){
        if (gesturableImg == null)
            return;
        $("#a_head_l").show();
        if ( count == pages.length-2){
            $("#a_head_r").hide();
        }
        if ( count == pages.length-1 ){
            return;
        }
        count = parseInt(count)+1;
        document.getElementById("p_head").innerHTML="Стр "+(parseInt(count)+1);
        clearCanvas();
        //clearCanvas();
    }
    
    //click in head befo image
    function befoImg(){
        if (gesturableImg == null)
            return;
        $("#a_head_r").show();
        if ( count == '1'){
            $("#a_head_l").hide();
        }
        if( count == '0' ){
            return;
        }
        count = parseInt(count)-1;
        document.getElementById("p_head").innerHTML="Стр "+(parseInt(count)+1);
        clearCanvas();
        //clearCanvas();
    }
    
    //create ul lisk in panel with list pages
    function createList(){
        $('#list').empty();
        var ul = document.createElement("ul");
        ul.id="list";
        for(var i in pages){
            $('#list').append(
                      '<li onClick="liOnClick(this.id);" id="'+i+'"><div id="div_style">'+(parseInt(i)+1)+'<div></li>\n'            
            );
        }
        $('#list').listview('refresh');
    }    
    
    //click list in panel
    function liOnClick(id){
        if (gesturableImg == null)
            return;
        $( '#mypanel' ).panel( "close" );
        count = id;
        $("#a_head_r").show();
        $("#a_head_l").show();
        if ( count == pages.length-2){
            $("#a_head_r").hide();
        }
        
        if ( count == '1'){
            $("#a_head_l").hide();
        }
        document.getElementById("p_head").innerHTML="Стр "+(parseInt(count)+1);
        clearCanvas();
        //clearCanvas();
    }
    
    //clear old image in canvas
    function clearCanvas(){
        window.parent.setTimeout(gesturableImg.destroyImg,0);
        var can = document.getElementById('mycanvas');
        var con = can.getContext('2d');
        con.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight);
        window.parent.setTimeout(gotozoom,0);
    }
